﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="sliderRange.aspx.cs" Inherits="sistemaAcademicoFinanceiroEscolas.sliderRange" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Slider - Range slider</title>
    <link rel="stylesheet" href="js/jquery-ui.css">

    <script src="js/jquery-1.8.3.js"></script>

    <script src="js/jquery-ui.js"></script>

    <link rel="stylesheet" href="js/style.css">

    <script>
        $(function() {

            $("#slider-range2").slider({
                range: true,
                min: 5,
                max: 23,
                values: [<%Response.Write(HiddenField1.Value.ToString().Replace(":00", ""));%>, <%Response.Write(HiddenField2.Value.ToString().Replace(":00", ""));%>],
                slide: function(event, ui) {


                $("#Label1").text(ui.values[0] + ":00");
                $("#Label2").text(ui.values[1] + ":00");


                var objHid11 = document.getElementById("HiddenField1");
                objHid11.value = ui.values[0] + ":00";

                var objHid211 = document.getElementById("HiddenField2");
                objHid211.value = ui.values[1] + ":00";

                }
            });

            $("#Label1").text($("#slider-range2").slider("values", 0) + ":00");
            $("#Label2").text($("#slider-range2").slider("values", 1) + ":00");

            var objHid = document.getElementById("HiddenField1");
            objHid.value = $("#slider-range2").slider("values", 0) + ":00";
            
            var objHid2 = document.getElementById("HiddenField2");
            objHid2.value = $("#slider-range2").slider("values", 1) + ":00";




$("#slider-range3").slider({
                range: true,
                min: 5,
                max: 23,
                values: [<%Response.Write(HiddenField3.Value.ToString().Replace(":00", ""));%>, <%Response.Write(HiddenField4.Value.ToString().Replace(":00", ""));%>],
                slide: function(event, ui) {


                $("#Label3").text(ui.values[0] + ":00");
                $("#Label4").text(ui.values[1] + ":00");


                var objHid11 = document.getElementById("HiddenField3");
                objHid11.value = ui.values[0] + ":00";

                var objHid211 = document.getElementById("HiddenField4");
                objHid211.value = ui.values[1] + ":00";

                }
            });

            $("#Label3").text($("#slider-range3").slider("values", 0) + ":00");
            $("#Label4").text($("#slider-range3").slider("values", 1) + ":00");

            var objHid = document.getElementById("HiddenField3");
            objHid.value = $("#slider-range3").slider("values", 0) + ":00";
            
            var objHid2 = document.getElementById("HiddenField4");
            objHid2.value = $("#slider-range3").slider("values", 1) + ":00";
        });
	</script>

</head>
<body>
    <form id="form1" runat="server">
    <body>
        <table>
            <tr>
                <td>
                    <label>
                        Hora:</label>
                    <%--<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;">--%>
                    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
                    às
                    <asp:Label ID="Label2" runat="server" Text=""></asp:Label>
                    <asp:HiddenField ID="HiddenField1" runat="server" Value="7" />
                    <asp:HiddenField ID="HiddenField2" runat="server" Value="9" />
                </td>
                <td>
                    <%--<div id="slider-range" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                </div>--%>
                    <div id="slider-range2" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                    </div>
                </td>
            </tr>
        </table>
        <br />
        <br />
        <br />
        <table>
            <tr>
                <td>
                    <label>
                        Hora:</label>
                    <%--<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;">--%>
                    <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
                    às
                    <asp:Label ID="Label4" runat="server" Text=""></asp:Label>
                    <asp:HiddenField ID="HiddenField3" runat="server" Value="7" />
                    <asp:HiddenField ID="HiddenField4" runat="server" Value="9" />
                </td>
                <td>
                    <%--<div id="slider-range" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                </div>--%>
                    <div id="slider-range3" style="width: 100px;" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all">
                    </div>
                </td>
            </tr>
        </table>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </body>
    </form>
</body>
</html>
